<template>
    <div>
        <Button class="mybtn1" icon="md-add-circle" @click="addData" type="info">添加</Button>
        <Table :loading="loading" border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="!row.editFlag">
                    <Button type="primary" icon="ios-build" size="small" style="margin-right: 5px"
                            @click="row.editFlag = true">编辑
                    </Button>
                    <Button type="warning" icon="md-eye" size="small" style="margin-right: 5px"
                            @click="modal.editQuotaTableFlag = true,modal.evaluate = row">表格
                    </Button>
                    <Poptip confirm
                            transfer
                            title="是否删除?"
                            @on-ok="deleteRow(row.eid,index)"
                            @on-cancel="$Message.info('已取消')">
                        <Button type="error" icon="md-trash" size="small">删除</Button>
                    </Poptip>
                </div>
                <div v-else>
                    <Button type="success" icon="ios-paper" size="small" style="margin-right: 5px"
                            @click="saveaddOrUpdate(row, index)">保存
                    </Button>
                    <Button type="info" icon="ios-hand" size="small" @click="cancel(row, index)">取消</Button>
                </div>
            </template>
        </Table>
        <br/>
        <Page :total="total" :page-size="map.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator />
        <edit-quota-table :modal="modal" />
    </div>
</template>

<script>
    import editQuotaTable from "@c/indexSystem/editQuotaTable";
    export default {
        components:{editQuotaTable},
        name: "Quota",
        data() {
            return {
                loading: false,
                data: [],
                assignData: [],
                map: {
                    page: 1,
                    size: 10
                },
                modal:{
                    editQuotaTableFlag:false,
                    evaluate:null,
                },
                total:0,
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '代码',
                        align: 'center',
                        sortable: true,
                        width: 200,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input v-model={params.row.ecode}/>
                            } else {
                                return <span>{params.row.ecode}</span>
                            }
                        }
                    },
                    {
                        title: '表的名称',
                        sortable: true,
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input v-model={params.row.evaluateName}/>
                            } else {
                                return <strong>{params.row.evaluateName}</strong>
                            }
                        }
                    },
                    {
                        title: '类型',
                        width: 150,
                        sortable: true,
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-select transfer v-model={params.row.type}>
                                    <i-option value='1'>选项类</i-option>
                                    <i-option value='2'>文本类</i-option>
                                </i-select>
                            } else {
                                return <Tag color={params.row.type == "1"?"warning":"primary"}>{params.row.type == "1"?"选项类":"文本类"}</Tag>
                            }
                        }
                    },
                    {
                        title: '选项类型',
                        width: 150,
                        sortable: true,
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-select transfer v-model={params.row.etype}>
                                    <i-option value="1">共用型</i-option>
                                    <i-option value="2">多类型</i-option>
                                </i-select>
                            } else {
                                return <Tag color={params.row.etype=="1"?"success":"error"}>{params.row.etype=="1"?"共用型":"多类型"}</Tag>
                            }
                        }
                    },
                    {
                        title: "创建时间",
                        sortable: true,
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return <span v-show={!params.row.editFlag}>{new Date(params.row.createTime).toLocaleDateString()}</span>
                        }
                    },
                    {
                        title: "修改时间",
                        sortable: true,
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return <span v-show={!params.row.editFlag}>{new Date(params.row.updateTime).toLocaleDateString()}</span>
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 250,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.map.page = val
                this.getAllEvaluate()
            },
            /**
             * 切换分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.map.size = val
                if (this.map.page === 1) {
                    this.getAllEvaluate()
                }
            },
            /**
             * 获取全部数据
             */
            getAllEvaluate() {
                this.loading = true
                this.http.post("/quota/getAllEvaluate", this.qs.parse(this.map)).then(res => {
                    if (res.data) {
                        this.data = res.data.list.map(m => {
                            m.editFlag = false
                            m.type = m.type.toString()
                            m.etype = m.etype.toString()
                            return m
                        })
                        Object.assign(this.assignData, this.data)
                        this.total = res.data.total
                    }
                }).finally(f=>{
                    this.loading = false
                })
            },
            /**
             * 添加假数据对象
             */
            addData() {
                let data = {
                    eid:null,
                    ecode: null,
                    evaluateName: null,
                    type: null,
                    etype: null,
                    editFlag: true
                }
                this.data.unshift(data)
            },
            /**
             * 取消保存
             * @param row
             * @param index
             */
            cancel(row, index) {
                if (row.eid==null) {
                    this.data.shift()
                }else {
                    Object.assign(row, this.assignData[index])
                }
            },
            /**
             * 执行保存添加或者保存修改
             * @param row
             * @param index
             * @returns {*}
             */
            saveaddOrUpdate(row, index) {
                for(let key in row){
                    if(key!="eid" && key!="questionsDOList" && row[key] != '0' && !row[key]){
                        return this.$Message.error('请完善数据!');
                    }
                }
                if (row.eid==null) {
                  this.http.post("/quota/saveAddEvaluate",this.qs.parse(row)).then(res=>{
                      if(res.data){
                          this.$Message.success({
                              background:true,
                              content:"添加成功"
                          })
                        row.editFlag = false
                        row.eid = res.data
                        row.createTime = (new Date()).toString()
                        row.updateTime = (new Date()).toString()
                      }
                  })
                }else {
                    this.http.put("/quota/saveUpdateEvaluate",this.qs.parse(row)).then(res=>{
                        if(res.data){
                            row.editFlag = false
                            row.updateTime = (new Date()).toString()
                            this.$Message.success({
                                background:true,
                                content:"修改成功"
                            })
                        }
                    })
                }
            },
            /**
             * 删除数据
             * @param eId
             * @param index
             */
            deleteRow(eId,index){
                this.http.delete(`/quota/deleteEvaluateById/${eId}`).then(res=>{
                    if(res.data){
                        this.$Message.success({
                            background:true,
                            content:"删除成功"
                        })
                        this.data.splice(index,1)
                    }
                })
            }
        },
        /**
         * 初始化
         */
        created() {
            this.getAllEvaluate()
        }
    }
</script>

<style scoped>

</style>
